<template>
  <div class="header-bar">
    <div class="title">
      <Navbar />
    </div>
    <div class="tool">
      <span>请选择项目：</span>
      <el-select
        v-model="projectId"
        placeholder="工程信息"
        size="small"
        popper-class="project"
        @change="getProjectInfo"
      >
        <el-option value="">
          <template>
            <div class="add-project" @click="createProjectInfo('showAddProject')">
              <span>新增项目信息</span>
              <span>+</span>
            </div>
          </template>
        </el-option>
        <el-option
          v-for="item in projectList"
          :key="item.lable"
          :label="item.projectName"
          :value="item.projectId"
        >
          <span class="project-name">{{item.projectName}}</span>
          <span class="icon el-icon el-icon-edit" @click.stop="editProject(item.projectId)"></span>
          <span class="icon el-icon el-icon-delete" @click.stop="deleteProject(item.projectId)"></span>
        </el-option>
      </el-select>
      <span>请选择作业：</span>
      <el-select
        class="work-name"
        v-model="sequence"
        placeholder="作业名称"
        size="small"
        @change="getSequence"
      >
        <el-option
          v-for="(item, index) in workSequence"
          :key="index"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <span>当前钻杆数:</span>
      <el-input-number
        v-model="num"
        @change="handleChange"
        :min="0"
        :max="CLMaxNumber"
        size="small"
        label="描述文字">
      </el-input-number>
      <!-- <el-button class="add-btn" type="plain" @click="createProjectInfo">新增工程</el-button> -->
    </div>
    <add-project
      :isShow="showAddProject"
      @closeDialog="onDialogClose"
    ></add-project>
    <add-operator
      :isShow="showAddOperator"
      @closeDialog="onDialogClose"
    ></add-operator>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import AddOperator from './AddOperator.vue'
import AddProject from './AddProject.vue'
import Navbar from './Navbar.vue'
export default {
  name: 'Header',
  components: {
    Navbar,
    AddProject,
    AddOperator
  },
  data () {
    return {
      logo: require('@/assets/image/logo.png'),
      date: '',
      sequence: '',
      projectId: '',
      showAddProject: false,
      showAddOperator: false,
      num: 0
    }
  },

  computed: {
    ...mapState(['projectList']),
    // 作业名称列表
    workSequence () {
      if (!this.projectId) {
        return []
      } else {
        const project = this.projectList.find(item => item.projectId === this.projectId)
        return project.sequence || []
      }
    },

    CLMaxNumber () {
      if (!this.projectId) {
        return 300
      } else {
        const project = this.projectList.find(item => item.projectId === this.projectId)
        return project.total || 300
      }
    }
  },

  created () {
    this.$store.dispatch('getProjectList')
  },

  methods: {
    // 选择项目信息
    getProjectInfo (projectId) {
      this.sequence = ''
      if (!projectId) {
        this.$message({
          type: 'warning',
          message: '请选择项目信息',
          showClose: true
        })
        return
      }
      this.$store.dispatch('settleSelectedProject', projectId)
    },

    // 选择作业名称信息
    getSequence (sequence) {
      if (!sequence) {
        this.$message({
          type: 'warning',
          message: '请选择操作业信息',
          showClose: true
        })
        return
      }
      this.$store.commit('setSelectedSequence', sequence)
    },

    // 更新state数据
    updateStoreState (name, value) {
      this.$store.dispatch('updateBasicData', {
        name,
        value
      })
    },

    // 创建项目信息
    createProjectInfo () {
      // this[`${prop}`] = true
      this.$router.push({ name: 'register' })
    },

    // 关闭dialog
    onDialogClose (data) {
      this[data] = false
    },

    // 钻杆数变化
    handleChange (num) {
      this.num = num
      this.$store.dispatch('getCLNumber', num)
    },

    // 删除项目信息
    deleteProject (id) {
      this.$alert('确认删除此项目信息？', '删除提示', {
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        callback: action => {
          if (action === 'confirm') {
            this.$store.dispatch('deleteProject', { projectId: id }).then(res => {
              this.$store.dispatch('getProjectList').then(async () => {
                await this.$store.dispatch('getProjectList')
                this.$message({
                  type: 'success',
                  message: res.msg,
                  showClose: true
                })
              })
            })
          }
        }
      })
    },

    // 编辑项目信息
    editProject (id) {
      this.$router.push({ name: 'register', query: { projectId: id } })
    }
  }
}
</script>

<style lang="scss" scoped>
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  box-sizing: border-box;
  padding: 0.625rem 0.9375rem;
  width: 100%;
  height: 60px;
  color: white;
  background-color: #1890ff;
  .title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .logo {
      margin-right: 1.25rem;
      width: 3.75rem;
      height: 3.75rem;
      border-radius: 0.5rem;
    }

    .text {
      height: 1.5rem;
      line-height: 1.5rem;
      font-size: 1.75rem;
    }
  }

  .tool {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    span {
      margin: 0 0.625rem;
      font-size: 1.125rem;
    }

    .add-btn{
      margin-left: 20px;
    }
  }
}

.work-name{
  width: 6.25rem;
}

.project {
  .add-project {
    display: flex;
    justify-content: space-between;
  }
}

.add-project {
  text-align: center;
}
</style>

<style lang="scss">
.el-select-dropdown__item{
  display: flex;
  align-items: center;
  .project-name{
    flex: 1;
  }

  .icon{
    margin-left: .375rem;
    width: 1rem;
    height: 1rem;
    &:hover{
      color: rgb(230, 128, 128);
    }
  }
}
</style>
